<script>
window.fn = {};

window.fn.open = function() {
  var menu = document.getElementById('menu');
  menu.open();
};

window.fn.load = function(page) {
  var content = document.getElementById('content');
  var menu = document.getElementById('menu');
  content.load(page)
    .then(menu.close.bind(menu));
};

</script>

<ons-page>


	  <ons-toolbar>
    <div class="left">
     	<ons-toolbar-button onclick="fn.open();"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>
    </div>
  </ons-toolbar>



<ons-splitter>
  <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('home.html')" tappable>
          Home
        </ons-list-item>
        <ons-list-item onclick="fn.load('settings.html')" tappable>
          Settings
        </ons-list-item>
        <ons-list-item onclick="fn.load('about.html')" tappable>
          About
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>

</ons-page>

<template id="home.html">
  <ons-page>
    <h2>Home</h2>
    
	CONTENT

   </ons-page>
</template>

<template id="settings.html">
  <ons-page>
    <h2>Settings</h2>
    
	CONTENT

   </ons-page>
</template>

<template id="about.html">
  <ons-page>
    <h2>About</h2>
    
	CONTENT

   </ons-page>
</template>
